<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <title>抽奖</title>

    <script type="text/javascript" src="jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="person.js"></script>
    <script type="text/javascript" src="script.js"></script>

</head>
<body>

<style type="text/css">
    body {
        background-color: #fff;
        text-align: center;
        padding-top: 50px;
        margin: 0 !important;
    }

    #Result {
        margin: 0 auto;
        text-align: center;
        width: 600pt;
        padding: 50px 0;
        margin-top: 100px;
    }

    #ResultNum {
        font-size: 50pt;
        font-family: Verdana
    }
    .buchou-result {
        font-size: 50pt;
        font-family: Verdana
    }

    #Button {
        margin: 50px 0 0 0;
    }

    #Button input {

    }

    .header {
        height: 2em;
    }

    .title {

        width: 15em;
        margin: 30px auto;
        -moz-animation: godPulse 1s; /* Firefox */
        -webkit-animation: godPulse 1s; /* Safari 和 Chrome */
        -o-animation: godPulse 1s;
        -webkit-animation-iteration-count: infinite;
        -moz-animation-iteration-count: infinite;
        -o-animation-iteration-count: infinite;
        animation-iteration-count: infinite;
    }

    h2 {
        margin-top: 100px;
        font-size: 3em;
    }

    #btn {
        padding: 0 50px;
        background-color: #e33100;;
        border: 1px solid rgb(211, 168, 9);
        width: 20em;
        height: 45px;
        margin: 2em auto;
        font-size: 1em;
        border-radius: 2.5px;
        -moz-border-radius: 2.5px;
        -webkit-border-radius: 2.5px;
        color: #FFF;
        opacity: .6;

        animation: redPulse 1s;
        -moz-animation: redPulse 1s; /* Firefox */
        -webkit-animation: redPulse 1s; /* Safari 和 Chrome */
        -o-animation: redPulse 1s;
        -webkit-animation-iteration-count: infinite;
        -moz-animation-iteration-count: infinite;
        -o-animation-iteration-count: infinite;
        animation-iteration-count: infinite;

    }
    #buchou {
        margin-top:30px;
        background-color: #AE5EC7;;
        border: 1px solid rgb(211, 168, 9);
        width: 4em;
        height: 45px;
        font-size: 1em;
        border-radius: 2.5px;
        -moz-border-radius: 2.5px;
        -webkit-border-radius: 2.5px;
        color: #FFF;
        opacity: .6;

        animation: godPulse 1s;
        -moz-animation: godPulse 1s; /* Firefox */
        -webkit-animation: godPulse 1s; /* Safari 和 Chrome */
        -o-animation: godPulse 1s;
        -webkit-animation-iteration-count: infinite;
        -moz-animation-iteration-count: infinite;
        -o-animation-iteration-count: infinite;
        animation-iteration-count: infinite;

    }
    .bg {
        top: 0px;
        position: absolute;
        z-index: -1;
        opacity: .3;
        width: 100%;
        height: 100%;
        background-image: url(imgs/3.jpg);
        background-size: cover;
    }

    .end {

        top: 0px;
        position: absolute;
        z-index: -1;
        opacity: .62;
        width: 100%;
        height: 100%;
        background-image: url(imgs/end.gif);
        background-size: cover;
    }

    @-webkit-keyframes bigAssButtonPulse {
        from {
            background-color: #749a02;
            -webkit-box-shadow: 0 0 25px #333;
        }
        50% {
            background-color: #91bd09;
            -webkit-box-shadow: 0 0 50px #91bd09;
        }
        to {
            background-color: #749a02;
            -webkit-box-shadow: 0 0 25px #333;
        }
    }

    @-webkit-keyframes greenPulse {
        from {
            background-color: #749a02;
            -webkit-box-shadow: 0 0 9px #333;
        }
        50% {
            background-color: #91bd09;
            -webkit-box-shadow: 0 0 18px #91bd09;
        }
        to {
            background-color: #749a02;
            -webkit-box-shadow: 0 0 9px #333;
        }
    }

    @-webkit-keyframes bluePulse {
        from {
            background-color: #007d9a;
            -webkit-box-shadow: 0 0 9px #333;
        }
        50% {
            background-color: #2daebf;
            -webkit-box-shadow: 0 0 18px #2daebf;
        }
        to {
            background-color: #007d9a;
            -webkit-box-shadow: 0 0 9px #333;
        }
    }

    @-webkit-keyframes redPulse {
        from {
            background-color: #bc330d;
            -webkit-box-shadow: 0 0 9px #333;
        }
        50% {
            background-color: #e33100;
            -webkit-box-shadow: 0 0 18px #e33100;
        }
        to {
            background-color: #bc330d;
            -webkit-box-shadow: 0 0 9px #333;
        }
    }

    @-webkit-keyframes magentaPulse {
        from {
            background-color: #630030;
            -webkit-box-shadow: 0 0 9px #333;
        }
        50% {
            background-color: #a9014b;
            -webkit-box-shadow: 0 0 18px #a9014b;
        }
        to {
            background-color: #630030;
            -webkit-box-shadow: 0 0 9px #333;
        }
    }

    @-webkit-keyframes orangePulse {
        from {
            background-color: #d45500;
            -webkit-box-shadow: 0 0 9px #333;
        }
        50% {
            background-color: #ff5c00;
            -webkit-box-shadow: 0 0 18px #ff5c00;
        }
        to {
            background-color: #d45500;
            -webkit-box-shadow: 0 0 9px #333;
        }
    }

    @-webkit-keyframes orangellowPulse {
        from {
            background-color: #fc9200;
            -webkit-box-shadow: 0 0 9px #333;
        }
        50% {
            background-color: #ffb515;
            -webkit-box-shadow: 0 0 18px #ffb515;
        }
        to {
            background-color: #fc9200;
            -webkit-box-shadow: 0 0 9px #333;
        }
    }

    @-webkit-keyframes godPulse {
        from {
            border-radius: 2em;
            background-color: #AE5EC7;
            -webkit-box-shadow: 0 0 9px #d3a809;
        }
        50% {
            border-radius: 2em;
            padding: .2em;
            background-color: #BC81CF;
            -webkit-box-shadow: 0 0 18px #e3b822;
        }
        to {
            border-radius: 1em;
            background-color: #AE5EC7;
            -webkit-box-shadow: 0 0 9px #d3a809;
        }
    }

    @-webkit-keyframes special {
        from {
            text-shadow: 0 0 10px rgba(255, 255, 255, 1), 0 0 20px rgba(255, 255, 255, 1), 0 0 30px rgba(255, 255, 255, 1), 0 0 40px #ff00de, 0 0 70px #ff00de, 0 0 80px #ff00de, 0 0 100px #ff00de;
        }
        50% {
            text-shadow: 0 0 10px rgba(255, 255, 255, 1), 0 0 20px rgba(255, 255, 255, 1), 0 0 30px rgba(255, 255, 255, 1), 0 0 40px #00ffff, 0 0 70px #9999ee, 0 0 80px #9999ee, 0 0 100px #9999ee;
        }
        to {
            text-shadow: 0 0 10px rgba(255, 255, 255, 1), 0 0 20px rgba(255, 255, 255, 1), 0 0 30px rgba(255, 255, 255, 1), 0 0 40px #00ffff, 0 0 70px #00ffff, 0 0 80px #00ffff, 0 0 100px #00ffff;
        }
    }

    .special {
        display: inline-block;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        padding: 10px;
        border: none;
        font: normal 48px/normal "Warnes", Helvetica, sans-serif;
        color: rgba(255, 255, 255, 1);
        text-decoration: normal;
        text-align: center;
        -o-text-overflow: clip;
        text-overflow: clip;
        white-space: pre;
        text-shadow: 0 0 10px rgba(255, 255, 255, 1), 0 0 20px rgba(255, 255, 255, 1), 0 0 30px rgba(255, 255, 255, 1), 0 0 40px #ff00de, 0 0 70px #ff00de, 0 0 80px #ff00de, 0 0 100px #ff00de;
        -webkit-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
        -moz-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
        -o-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
        transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
        -moz-animation: special 5s; /* Firefox */
        -webkit-animation: special 5s; /* Safari 和 Chrome */
        -o-animation: special 5s;
        -webkit-animation-iteration-count: infinite;
        -moz-animation-iteration-count: infinite;
        -o-animation-iteration-count: infinite;
        animation-iteration-count: infinite;
    }

    .special:hover {

    }

    .hidden {
        display: none;
    }

    #audio_btn {
        position: absolute;
        display: block;
        right: 10px;
        top: 10px;
        z-index: 200;
        display: none;
        width: 50px;
        height: 50px;
        background-repeat: no-repeat;
    }
    .rotate {
        position: absolute;
        left: 10px;
        top: 10px;
        width: 30px;
        height: 30px;
        background-size: 100% 100%;
        background-image: url(imgs/music_off.png);
        -webkit-animation: rotating 1.2s linear infinite;
        -moz-animation: rotating 1.2s linear infinite;
        -o-animation: rotating 1.2s linear infinite;
        animation: rotating 1.2s linear infinite;
    }
    .off {
        background-image: url(imgs/music_off.png);
        background-size: 30px 30px;
        background-repeat: no-repeat;
        background-position: center center;
    }
    @-webkit-keyframes rotating {
        from {
            -webkit-transform: rotate(0deg)
        }
        to {
            -webkit-transform: rotate(360deg)
        }
    }

    @keyframes rotating {
        from {
            transform: rotate(0deg)
        }
        to {
            transform: rotate(360deg)
        }
    }

    @-moz-keyframes rotating {
        from {
            -moz-transform: rotate(0deg)
        }
        to {
            -moz-transform: rotate(360deg)
        }
    }
</style>

<!--<EMBED style="position:absolute;top:-1000px;" src="Love Paradise.mp3" autostart="true" loop="true" width="80" height="20">-->
<!--<div id="audio_btn" class="video_exist off" style="display: block;">-->
    <!--<div id="yinfu" class=""></div>-->
    <!--<audio loop="" src="Love Paradise.mp3" id="media" autoplay=""-->
           <!--preload=""></audio>-->
<!--</div>-->
<div id="audio_btn" class="video_exist" style="display: block;">
    <div id="yinfu" class="rotate"></div>
    <audio loop="" src="Love Paradise.mp3" id="media" autoplay="" preload=""></audio>
</div>
<div class="bg"></div>
<div class="end hidden"></div>
<div class="header">
    <div class="title" style="color:rgb(211,168,9);font-size:3em;">王舵❤袁昕婚礼抽奖</div>
</div>
<h2 style="color:rgb(255,0,0);">接下来抽取的是三等奖</h2>

<div id="Result" style="color:rgb(211,168,9)">

    <span id="ResultNum">&nbsp;</span>
    <div class="buchou-result hidden"></div>
</div>
<div class="special hidden">
    <span>今天的特等奖是我们特意为奶奶准备的</span><br><span>谢谢奶奶这么多年来一直无微不至的关怀和奉献！</span>
</div>
<div></div>
<div id="Button">
    <input type="button" id="btn" class="" value="抽取三等奖" onclick="beginRndNum(this)">

</div>

<input type="button" id="buchou" class="hidden" value="补抽" onclick="buchou(this)">
</body>
</html>